#main{
    animation-name: main;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    border-radius: 250px;
   
   margin-top:100px;
   margin-left:30%;
   width: 500px;
   height: 500px;
  
   
}


@keyframes main
{    form{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}
to{
    transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    -moz-transform: rotate(3600deg);
    -o-transform: rotate(3600deg);
    -ms-transform: rotate(3600deg);
}
}
#child{
    border-radius: 10px;
    position: absolute;
    width: 20px;
    height: 20px;
    background: black;
    animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
@keyframes myfirst
{    0%      { visibility: hidden; }
20%   {margin-left : 50px;margin-top:50px;visibility: visible;}
40%  {margin-left: 100px;margin-top:100px;visibility: visible;}
60%  {margin-left: 150px;margin-top:150px;visibility: visible;}
80% {margin-left: 200px;margin-top:200px;visibility: visible;}
100% {margin-left: 250px;margin-top:250px;visibility: hidden;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%      { visibility: hidden; }
    20%   {margin-left : 50px;margin-top:50px;visibility: visible;}
    40%  {margin-left: 100px;margin-top:100px;visibility: visible;}
    60%  {margin-left: 150px;margin-top:150px;visibility: visible;}
    80% {margin-left: 200px;margin-top:200px;visibility: visible;}
    100% {margin-left: 250px;margin-top:250px;visibility: hidden;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0%      { visibility: hidden; }
    20%   {margin-left : 50px;margin-top:50px;visibility: visible;}
    40%  {margin-left: 100px;margin-top:100px;visibility: visible;}
    60%  {margin-left: 150px;margin-top:150px;visibility: visible;}
    80% {margin-left: 200px;margin-top:200px;visibility: visible;}
    100% {margin-left: 250px;margin-top:250px;visibility: hidden;}
}

@-o-keyframes myfirst /* Opera */
{
    0%      { visibility: hidden; }
    20%   {margin-left : 50px;margin-top:50px;visibility: visible;}
    40%  {margin-left: 100px;margin-top:100px;visibility: visible;}
    60%  {margin-left: 150px;margin-top:150px;visibility: visible;}
    80% {margin-left: 200px;margin-top:200px;visibility: visible;}
    100% {margin-left: 250px;margin-top:250px;visibility: hidden;}
}